<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/extras/spring-security">
<head>
<meta charset="UTF-8"/>
<title>教评系统-找回密码</title>
    <meta name="renderer" content="webkit"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
    <link rel="shortcut icon" th:href="@{../images/favicon.ico}"/>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all"/>
    <link rel="stylesheet" th:href="@{/css/login.css}"/>
    <script th:src="@{/layui/layui.js}"></script>
    <script th:src="@{/js/jquery-3.6.0.min.js}"></script>
</head>
<body>
<div class="layui-layout layui-layout-admin">
  <div class="layui-header">
    <!-- 头部区域（可配合layui 已有的水平导航） -->
    <ul class="layui-nav layui-layout-left">
      <!-- 移动端显示 -->
      <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
        <i class="layui-icon layui-icon-spread-left"></i>
      </li>
      
      <li class="layui-nav-item layui-hide-xs"><a href="JavaScript:;" target="resets">密码更改操作：</a></li>
      
    </ul>
  </div>
  <div class="layui-side layui-bg-white">
     <p>&nbsp;&nbsp;请按步骤操作：</p>
  </div>
    <div class="layui-body" style="width: 100%;height: 500px;">
    <!-- 内容主体区域 -->
      <div class="layui-main">
   <header class="layui-elip">密码更改</header>
    <div class="layui-col-md6">
      <div class="layui-card">
          <div class="layui-card-body">
            <form class="layui-form" action="/Teaching_evaluation_system/updateByCode" method="post">
            <div class="layui-form-item">
            <p style="color: red" th:text="${error}" th:if="${ not #strings.isEmpty(error)}"></p>
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-block">
                    <input type="text" id="username" name="username" style="width: 200px" required  lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input"/>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">邮箱地址</label>
                <div class="layui-input-block">
                    <input type="text" id="email" name="email" style="width: 200px" required  lay-verify="required" placeholder="请输入邮箱地址" autocomplete="off" class="layui-input"/>
                </div>
            </div>
            <div class="layui-form-item">
	            <div class="layui-input-inline layui-col-md9">
	               <input style="width: 80px;float: right;" type="text" id="codes" name="codes"  lay-verify="required" placeholder="验证码" autocomplete="off" class="layui-input"/>
	            </div>
	            <span style="width: 100px" class="layui-btn layui-btn-radius layui-col-md3" id="btn" name="btn">获取验证码</span>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">新密码</label>
                <div class="layui-input-inline">
                  <input type="password" name="new_password" lay-verify="required" placeholder="请输入新密码" autocomplete="off" class="layui-input"/>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">确认密码</label>
                <div class="layui-input-inline">
                  <input type="password" name="re_new_password" lay-verify="required" placeholder="请输入再次输入新密码" autocomplete="off" class="layui-input"/>
                </div>
            </div>
            <div class="layui-form-item">
            <div class="layui-input-block">
              <button type="submit" class="layui-btn lay-submit" lay-filter="resetPwd">立即提交</button>
              <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
            </div>
        </form>
          </div>
      </div>
    </div>
  </div>
  </div>
</div>
</body>
<script>
layui.use(['element','layer'], function(){
	  var layer = layui.layer
	  ,element = layui.element
	  ,$ = layui.$;
	  //点击事件
	  
	    var InterValObj; //timer变量，控制时间
		var count = 60; //间隔函数，1秒执行
		var curCount;//当前剩余秒数
		
	  $('#btn').on('click',function(){
		    curCount = count;
	        var email = $('#email').val();
	        if(email.match(/^\w+@\w+\.\w+$/i)){
	        layer.msg('请稍后');
	        document.getElementById("btn").setAttribute("disabled","true" );//设置按钮为禁用状态
	        $('#btn').addClass('layui-btn-disabled');
	        $('#btn').text(curCount + "秒后重获");
			InterValObj = window.setInterval(SetRemainTime, 1000); // 启动计时器timer处理函数，1秒执行一次
		  //ajax
		  $.ajax({
			  url:"/Teaching_evaluation_system/code",//接口
			  type:"POST",//访问方式
			  dataType:"JSON",//数据类型
			  data:{mailAddress:$('#email').val()},//访问参数
			  success:function(data){
				  if(data){layer.msg("验证码发送成功！");}
				      else{layer.msg("验证码发送失败！");}
			  }
		  })
	        }else{
	        	layer.msg("邮箱格式有误，请重新输入");
	        }
	  }) 
	//timer处理函数
		function SetRemainTime(){
		    if(curCount == 0){
		       $('#btn').removeClass('layui-btn-disabled');
		        $('#btn').text("重获验证码");
		        window.clearInterval(InterValObj);// 停止计时器
		        document.getElementById("btn").removeAttribute("disabled");//移除禁用状态改为可用
		    } else{
		        curCount--;
				$('#btn').text(curCount + "秒后重获");
		    }
		}
  })
</script>
</html>